<template>
  <div>
    <el-menu
        :default-active="activeIndex"
        class="nav-menu"
        mode="horizontal"
        background-color="#ffffff"
        text-color="#42b983"
        active-text-color="#42b983"
        @select="handleSelect"
    >
      <el-menu-item index="0" class="logo" @click="sel4">MyPostman接口测试平台</el-menu-item>
      <div class="nav-items">
        <el-menu-item index="1" @click="sel1">工具</el-menu-item>
        <el-menu-item index="2" @click="sel2">在线文档</el-menu-item>
        <el-menu-item index="3" @click="sel3">个人中心</el-menu-item>
        <el-menu-item index="4" @click="sel5">插件</el-menu-item>
      </div>
    </el-menu>
    <!-- 添加了margin-top来设置轮播图与导航栏的间隔 -->
    <el-carousel indicator-position="outside" style="margin-top: 80px;">
      <el-carousel-item v-for="(images, index) in images" :key="index">
        <img :src="images" alt="轮播图" style="width: 100%; height: 100%;">
      </el-carousel-item>
    </el-carousel>
    <div>
      <PopularCard1/>
      <PopularCard2/>
      <PopularCard3/>
    </div>
    <div>
      <ApiList/>
    </div>
    <div>
      <MyFoot/>
    </div>
  </div>
</template>

<script>
import PopularCard1 from "@/components/PopularCard1.vue";
import PopularCard2 from "@/components/PopularCard2.vue";
import PopularCard3 from "@/components/PopularCard3.vue";
import ApiList from "@/components/ApiList.vue";
import MyFoot from "@/components/MyFoot.vue";

export default {
  name: 'PlugMarket',
  data() {
    return {
      activeIndex: '1', // 可以根据需要设置默认激活的菜单项
      images:[
          'imgs/1.png',
          'imgs/2.png',
          'imgs/3.png'
      ]
    }
  },
  components:{
    PopularCard1,
    PopularCard2,
    PopularCard3,
    ApiList,
    MyFoot
  },
  methods: {
    sel1() {
      this.$router.push('/home');
    },
    sel2() {
      this.$router.push('/doc');
    },
    sel3(){
      this.$router.push('/person');
    },
    sel4(){
      this.$router.push('/');
    },
    sel5(){
      this.$router.push('/market');
    }
  },
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.logo {
  font-size: 1.2rem;
  font-weight: bold;
  color: #42b983 !important;
}

.nav-items {
  display: flex;
}
.nav-menu {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0 50px; /* 设置导航栏左右内边距为50px */
}

/* 设置轮播图的样式 */
.el-carousel {
  width: calc(100% - 100px); /* 减去左右两边的50px */
  margin-left: 50px; /* 左边距 */
  margin-right: 50px; /* 右边距 */
}
</style>